<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="客户详情" name="first">


  <div class="app-container">

    <el-card class="box-card" >
      <div class="text item" >
        公司名称：{{client_poolList.clientCompany}}
      </div>

      <div class="text item" v-for="key in client_poolList.crmClientPhoneList">
        <div class="text item" >
          客户名：{{key.clientName}}
        </div>
        <div class="text item" >
          <span>电话:</span><a :href="'tel:'+key.clientPhone" style="color: #00afff">{{key.clientPhone}}</a>
        </div>
      </div>

      <div class="text item" >
      客户所在行业：{{client_poolList.clientIndustry}}
    </div>
      <div class="text item" >
      客户需求：{{client_poolList.clientProduct}}
    </div>
      <div class="text item" >
        客户分类：{{client_poolList.clientClassify}}
      </div>
      <div class="text item" >
        客户地址：{{client_poolList.clientAddress}}
      </div>
      <div class="text item" >
        信息采集日期：{{client_poolList.createTime}}
      </div>
    </el-card>
    <el-divider><span>客户情况</span></el-divider>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['crm:client_pool:add']"
        >新增</el-button>
      </el-col>
    </el-row>

  <el-card class="box-card" v-for="key in particularsList">
    <div slot="header" class="clearfix">
      <span>创建时间：{{ key.createTime }}</span>

    </div>
    <div  class="text item">
      {{key.details}}
      <br  />
      <div style="float: right"> {{key.createBy}}</div>
    </div>
  </el-card>
    <div>
</div>

<!--    <el-card class="box-card" v-for="key in client_poolList">-->
<!--      <div slot="header" class="clearfix">-->
<!--        <span>{{key.clientCompany}}</span>-->
<!--        <el-button type="primary" style="float: right;" icon="el-icon-edit" circle></el-button>-->
<!--      </div>-->
<!--      <div  class="text item">-->
<!--        <span>客户名:</span>{{key.clientName}}-->
<!--      </div>-->
<!--      <div  class="text item">-->
<!--        <span>电话:</span><a :href="'tel:'+key.clientPhone" style="color: #00afff">{{key.clientPhone}}</a>-->
<!--      </div>-->
<!--      <div  class="text item">-->
<!--        <span>客户情况:</span>{{key.clientCondition}}-->
<!--      </div>-->
<!--      <div  class="text item">-->
<!--        <span>客户分类:</span>{{key.clientClassify}}-->
<!--      </div>-->
<!--      <div  class="text item">-->
<!--        <span>客户地址:</span>{{key.clientAddress}}-->
<!--      </div>-->

<!--    </el-card>-->


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getparticulars"
    />

    <!-- 添加或修改客户公海池对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="客户情况">
          <el-input type="textarea" v-model="form.details"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
    </el-tab-pane>
    <el-tab-pane label="订单" name="second" >
      <div class="app-container">
      <el-card class="box-card" >
        <div class="text item" >
          公司名称：{{client_poolList.clientCompany}}
        </div>

        <div class="text item" v-for="key in client_poolList.crmClientPhoneList">
          <div class="text item" >
            客户名：{{key.clientName}}
          </div>
          <div class="text item" >
            <span>电话:</span><a :href="'tel:'+key.clientPhone" style="color: #00afff">{{key.clientPhone}}</a>
          </div>
        </div>

        <div class="text item" >
          客户所在行业：{{client_poolList.clientIndustry}}
        </div>
        <div class="text item" >
          客户需求：{{client_poolList.clientProduct}}
        </div>
        <div class="text item" >
          客户分类：{{client_poolList.clientClassify}}
        </div>
        <div class="text item" >
          客户地址：{{client_poolList.clientAddress}}
        </div>
        <div class="text item" >
          信息采集日期：{{client_poolList.createTime}}
        </div>
      </el-card>
      <el-divider><span>客户订单</span></el-divider>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAddOrder"
              v-hasPermi="['crm:order:add']"
            >新增</el-button>
          </el-col>
        </el-row>

        <el-card class="box-card" v-for="key in orderList" >
          <div slot="header" class="clearfix">
            <span>创建时间：{{ key.createTime }}</span>

          </div>
          <div  class="text item">
            <div>
            <span>订单牌号:</span>{{key.orderMork}}
            </div>
            <div>
              <span>数量:</span>{{key.orderNumber}}kg
            </div>
            <div>
              <span>单价:</span>{{key.orderPrice}}
            </div>
            <div>
              <span>总价:</span>{{key.orderTotalPrice}}
            </div>
            <div>
              <span></span>
              <div>图片：</div>
              <el-image
              style="width: 100px; height: 100px"
              :src="key.orderImg"
              :preview-src-list="key.orderImgList">
            </el-image>
            </div>

            <br  />
            <div style="float: right"> {{key.orderPrincipal}}</div>
          </div>
        </el-card>


<!--新增订单-->
        <!-- 添加或修改客户订单对话框 -->
        <el-dialog :title="title" :visible.sync="openOrder" width="500px" append-to-body>
          <el-form ref="form" :model="Orderform" :rules="rules" label-width="80px">
            <el-form-item label="订单牌号" prop="orderMork">
              <el-input v-model="Orderform.orderMork" placeholder="请输入订单牌号" />
            </el-form-item>
            <el-form-item label="数量单位公斤" prop="orderNumber">
              <el-input v-model="Orderform.orderNumber" placeholder="请输入数量单位公斤" />
            </el-form-item>
            <el-form-item label="单价" prop="orderPrice">
              <el-input v-model="Orderform.orderPrice" placeholder="请输入单价" />
            </el-form-item>
            <el-form-item label="总价" prop="orderTotalPrice">
              <el-input v-model="Orderform.orderTotalPrice=Orderform.orderPrice*Orderform.orderNumber" placeholder="请输入总价" :disabled="true" />
            </el-form-item>
            <el-form-item label="客户公司名" prop="orderCompany" >
              <el-input v-model="Orderform.orderCompany=client_poolList.clientCompany" placeholder="请输入客户公司名" :disabled="true" />
            </el-form-item>
            <el-form-item label="订单图片" prop="orderImg">
              <el-upload
                class="avatar-uploader"
                action="/dev-api/crm/order/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :headers="headers"
                :before-upload="beforeAvatarUpload">
                <img v-if="Orderform.orderImg" :src="Orderform.orderImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!--          <el-input v-model="form.orderImg" placeholder="请输入订单图片地址" />-->
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitOrderfrom">确 定</el-button>
            <el-button @click="cancelOrder">取 消</el-button>
          </div>
        </el-dialog>






</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { listClient_pool, getClient_pool, delClient_pool, addClient_pool, updateClient_pool } from "@/api/crm/client_pool";
import {addCondition, listCondition} from "../../../api/crm/client_pool";
import {addOrder, listOrder} from "../../../api/crm/order";
import {getToken} from "../../../utils/auth";

export default {
  name: "client_particulars",
  data() {
    return {
      // 遮罩层
      loading: true,
      headers:{
        Authorization: 'Bearer ' +getToken()
      },
      // 选中数组
      ids: [],
      activeName: 'first',
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      orderList: [],
      // 客户公海池表格数据
      client_poolList: {},
      particularsList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openOrder:false,
      options: [{
        value: 'A',
        label: 'A类客户'
      }, {
        value: 'B',
        label: 'B类客户'
      }, {
        value: 'C',
        label: 'C类客户'
      }],
      value: '',
      queryOrderParams: {
        orderMork: null,
        orderNumber: null,
        orderPrice: null,
        orderTotalPrice: null,
        orderCompany: null,
        clientId: null,
        orderImg: null,
        orderPrincipal: null,
        orderStatus: null,
        creationBy: null,
        upadteBy: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        clientCompany: null,
        clientName: null,
        clientPhone: null,
        clientCondition: null,
        clientAddress: null,
        clientClassify: null,
        keyboarder: null,
        clientVestIn: null,
        clientStatus: null,
        creationDate: null,
        creationBy: null,
        updateDate: null,
        upadteBy: null,
        clientConditionId: null,
      },
      // 表单参数
      form: {},
      Orderform:{},
      // 表单校验
      rules: {
      },

    };
  },
  created() {
    this.getList();
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /** 新增按钮操作 */
    handleAddOrder() {
      this.resetOrder();
      this.openOrder = true;
      this.title = "添加客户订单";
    },
    getOrderList() {
      this.loading = true;
      this.queryOrderParams.clientId=this.$route.params.clientId
      listOrder(this.queryOrderParams).then(response => {
        this.orderList = response.rows;
        for (let i = 0; i < this.orderList.length; i++) {
          this.orderList[i]["orderImgList"]=[this.orderList[i].orderImg]
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    /**提交订单信息*/
    submitOrderfrom(){
      this.Orderform.clientId=this.client_poolList.clientId
      addOrder(this.Orderform).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.openOrder = false;
        this.getList()
        console.log(this.orderList)
      });
    },

    /** 查询客户公海池列表 */
    getList() {
      this.loading = true;
      getClient_pool(this.$route.params.clientId).then(response => {
        this.client_poolList = response.data;
        console.log(this.client_poolList)
        this.getparticulars();
        this.getOrderList()
        //this.total = response.total;
        //this.loading = false;
      });
    },
    getparticulars(){
      this.loading = true;
      this.queryParams.clientConditionId=this.$route.params.clientId
      listCondition(this.queryParams).then(response => {
        this.particularsList = response.rows;
        console.log(this.client_poolList)
        this.total = response.total;
        this.loading = false;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        clientId: null,
        clientCompany: null,
        clientName: null,
        clientPhone: null,
        clientCondition: null,
        clientAddress: null,
        clientClassify: null,
        keyboarder: null,
        clientVestIn: null,
        clientStatus: null,
        creationDate: null,
        creationBy: null,
        updateDate: null,
        upadteBy: null,
        remark: null
      };
      this.resetForm("form");
    },


    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.clientId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增客户情况";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const clientId = row.clientId || this.ids
      getClient_pool(clientId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户公海池";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        this.form.clientConditionId=this.$route.params.clientId
        addCondition(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getparticulars();
            });

      });
    },
    // 取消按钮
    cancelOrder() {
      this.openOrder = false;
      this.resetOrder();
    },
    // 表单重置
    resetOrder() {
      this.Orderform = {
        orderId: null,
        orderMork: null,
        orderNumber: null,
        orderPrice: null,
        orderTotalPrice: null,
        orderCompany: null,
        clientId: null,
        orderImg: null,
        orderPrincipal: null,
        orderStatus: null,
        createTime: null,
        creationBy: null,
        updateTime: null,
        upadteBy: null,
        remark: null
      };
      this.resetForm("Orderform");
    },
    //订单图片上传
    handleAvatarSuccess(response,res, file) {
      this.Orderform.orderImg = response.msg
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt5M;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const clientIds = row.clientId || this.ids;
      this.$modal.confirm('是否确认删除客户公海池编号为"' + clientIds + '"的数据项？').then(function() {
        return delClient_pool(clientIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('crm/client_pool/export', {
        ...this.queryParams
      }, `client_pool_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: auto;
  margin: 10px auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


